<template>
<div  id="Register">
 <div class="wrapper">
     <div class="container">
         <div style="height:30%;width:100%">
         </div>
         <h1>手机购物</h1>
         <form v-if="show">
             <input placeholder="username" v-model="username">
             <input placeholder="password" v-model="password">
             <button @click="Login()">登录</button>
             <br>
             <div style="height:20%;width:100%;display:flex;justify-content:center;">
             
             <span>没有账号?</span>
             &emsp;&emsp;&emsp;&emsp;
             <span @click="change()">注册</span>
             </div>
         </form>
         <form v-else>
             <input placeholder="email" v-model="email">
             <input placeholder="username" v-model="username">
             <input placeholder="password" v-model="password">
             <button @click="sign()">注册</button>
             <br>
             <div style="height:20%;width:100%;display:flex;justify-content:center;">
             
             <span>有账号了?</span>
             &emsp;&emsp;&emsp;&emsp;
             <span @click.prevent="change2()">登录</span>
             </div>
         </form>
     </div>
 </div>
</div>
</template>

<script>
export default {
 components:{

 },
 data () {
  return {
      username: "",
      password: "",
      email:"",
      show: true,
      typeLogin:1,
      typeRegister:2,
      code:"",
      msg:"",
      status: "",
  }
 },
 methods:{
     change(){
         this.show=false;
         
     },
     change2(){
        this.show=true
     },
      sign(){
          console.log(this.username);
            console.log(this.pwd);
     this.$http.post(`http://localhost:8181/user/register?username=${this.username}&&password=${this.password}&&email=${this.email}`)
        .then(resp => {
            console.log(this.username);
            console.log(this.password);
          console.log(resp);
          console.log(resp.data+"resp.data");
          console.log(resp.data.code+"resp.data.code");
          this.code=resp.data.code;
          this.msg=resp.data.msg;
          console.log(this.code);
          if(this.code!=1){
               this.show=true
              alert(this.msg);
          }
          else{
              alert(this.msg);
          }
        })
        .catch(function(err){console.log(err);})
  },
  Login(){
      console.log(this.username);
            console.log(this.password);
            
      this.$http.get(`http://localhost:8181/user/login?username=${this.username}&&password=${this.password}`)
        .then(resp => {
            console.log(this.username);
            console.log(this.password);
            console.log(this.code);
          this.code=resp.data.code;
          this.msg=resp.data.msg;
          this.status=resp.data.status;
          
          if(this.code==0){
              
              this.$router.push({path: '/Home'})
              console.log(this.code)
              alert(this.msg)
          }else if(this.code==0&&this.status==false){
              console.log(this.code)
              
              }else{
              alert(this.msg)
          }
        })
        .catch(function(err){console.log(err);})
  }
 },
}

</script>

<style scoped>
body,html,#Register{
    width:100%;
    height:100%;
    background-size: cover;
    background: url('../assets/img/bg-image-1.jpg');
       z-index:-1;
}
@import url(http://fonts.useso.com/css?family=Source+Sans+Pro:200,300);
*{
padding: 0;
margin: 0;
font-weight: 300;
}
.wrapper{
 width:100%;
    height:100%;
 background-color: #010001;
 opacity: 0.8;
}

.container{
max-width: 600px;
height: 400px;
margin: 0 auto 0 auto;

}

.container h1{
text-align: center;
width: 100%;
 background:rgba(253, 71, 102 ,1);
    background: linear-gradient(120deg, #1C99FE 20.69%, #7644FF 50.19%, rgba(253, 71, 102 ,1) 79.69%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=rgba(253, 71, 102 ,1), endColorstr=#337DFF,GradientType=1 );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    font-size:40px;
    text-align:center;
    padding:10px;
    font-weight:900;
    font-family: 'Montserrat';
}

form {
padding: 20px 0;
position: relative;
z-index: 2;
width:80%;
left:10%;
    border-radius: .3em;
    box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
                0 .5em 1em rgba(0, 0, 0, 0.6);
    text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
    background: hsla(0,0%,100%,.3)
}

form input{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
display: block;
margin: 0 auto 10px auto;
border: 1px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.2);
border-radius:3px;
width: 250px;
font-size: 18px;
text-align: center;
padding: 10px 0;
color: white;
font-weight: 300;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
}

form input:hover {
background-color: rgba(255, 255, 255, 0.4);
}
form input:focus {
background-color: white;
width: 300px;
color: #53e3a6;
}

form button{
width: 250px;
padding: 10px 15px;
background-color: white;
color: white;
border: 0;
border-radius: 3px;
font-size: 18px;
cursor: pointer;
display: block;
margin:0 auto;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
transition-duration: 0.25s;
   background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
 
    animation: Gradient 1s ease infinite;

}

form button:hover{
background-color: #f5f7f9;
}
button:hover{
      box-shadow: 0 10px 20px 0 rgba(47,55,213,0.3);
      background-position: right;
      transform: scale(1.05);
    }
    span{
        color:white;
    }
    span:hover{
        color:#23A6D5;
    }
@keyframes Gradient {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}

</style>
